<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            margin: 100px auto;
            width: 700px;
            height: 400px;
            background-color: #e38a0e;
            border: 1px solid #e38a0e;
        }

        .box h1 {
            font-size: 20px;
            height: 50px;
            color: white;
            line-height: 50px;
            text-align: center;
        }

        .content {
            width: 500px;
            height: 350px;
            margin: 10px 90px;
        }

        .content p {
            font-size: 12px;
            margin: 5px 0;
            color: white;
        }

        .content input {
            width: 100%;
            height: 30px;
            margin: 5px 0;
            outline: none;
            border: 1px solid #f69206
        }

        .content input:hover {
            background-color: #f69206;
            color: white;
        }

        .content button {
            width: 100%;
            height: 30px;
            margin: 15px 0;
            border: none;
            color: white;
            background-color: #f69206;
        }

        .box2>h1 {
            font-size: 50px;
            color: white;
            text-align: center;
            margin-top: 10px;
        }

        .box2 .content {
            width: 650px;
            height: 190px;
            margin: 10px 25px;
            display: flex;
            justify-content: space-between;
        }

        .box2 .content .left {
            width: 305px;
            height: 150px;
            color: white;
            margin: 0 10px;
            background-color: #f69206;
        }

        .box2 .content .left p {
            font-size: 12px;
            margin: 15px 10px;
            color: white;
        }

        .box2 .content .left .date {
            width: 250px;
            height: 50px;
            font-size: 20px;
            color: white;
            text-align: center;
            line-height: 50px;
        }

        .box2 .content .right {
            width: 305px;
            height: 150px;
            color: white;
            margin: 0 10px;
            background-color: #f69206;
        }

        .box2 .content .right p {
            font-size: 20px;
            margin: 15px 10px;
            color: white;
        }

        .box2 .content .right .rate {
            margin-left: 15px;
            margin-top: 5px;
        }

        .box2.content.right.rate div {
            font-size: 12px;
            margin: 10px 0;
            color: white;
        }

        .box2 button {
            width: 400px;
            height: 30px;
            margin: 15px 0;
            margin-left: 150px;
            border: none;
            color: white;
            background-color: #f69206;
        }
        .return {
            position: fixed;
            right: 50%;
            bottom: 5%;
            display: block;
            width: 100px;
            height: 30px;
            background-color: #e38a0e;
            color: #fff;
            text-align: center;
            line-height: 30px;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="app">
        <div class="box" v-if="IsClicked">
            <h1>计算你的实时收入</h1>
            <div class="content">
                <p>月薪</p>
                <input type="number" placeholder="请输入月薪" v-model.number="monthlyPay">
                <p>每月工作天数</p>
                <input type="number" placeholder="请输入工作天数" v-model.number="workingDays">
                <p>每天工作小时数</p>
                <input type="number" placeholder="请输入每天工作小时数" v-model.number="hoursPerDay">
                <button @click="calculate">开始计算</button>
                <!-- 显示错误信息 -->
                <p v-if="errorMessage" style="color: red;">{{ errorMessage }}</p>
            </div>
        </div>
        <div class="box box2" v-else>
            <div class="head">
                <h1>你已经赚到</h1>
            </div>
            <h1>
                ￥{{imcome.toFixed(2)}}
            </h1>
            <div class="content">
                <div class="left">
                    <p>
                        已工作时间
                    </p>
                    <div class="date">
                        {{formattedTime}}
                    </div>
                </div>
                <div class="right">
                    <p>收入速率</p>
                    <div class="rate">
                        <div>
                            每小时：￥{{hourlyRate.toFixed(2)}}
                        </div>
                        <div>
                            每分钟：￥{{minuteRate.toFixed(2)}}
                        </div>
                        <div>
                            每秒钟：￥{{secondRate.toFixed(2)}}
                        </div>
                    </div>
                </div>
            </div>
            <button @click="again">重新计算</button>
        </div>
    </div>
    <a href="首页.html" class="return">返回</a>
    <script>
        const { createApp } = Vue
        createApp({
            data() {
                return {
                    message: 'Hello Vue!',
                    monthlyPay: 0,
                    IsClicked: true,
                    workingDays: 0,
                    hoursPerDay: 0,
                    errorMessage: '',
                    imcome: 0,
                    formattedTime: '00:00:00',
                    timer: null,
                    timer2: null
                }
            },
            methods: {
                calculate() {
                    if (this.monthlyPay <= 0 || this.workingDays <= 0 || this.hoursPerDay <= 0) {
                        this.errorMessage = '请输入有效的月薪、工作天数和每天工作小时数';
                        return;
                    }
                    if (this.workingDays > 30) {
                        this.errorMessage = '请输入正确的工作天数';
                        return;
                    }
                    if (this.hoursPerDay > 24) {
                        this.errorMessage = '请输入正确的每天工作小时数';
                        return;
                    }
                    this.errorMessage = '';
                    this.IsClicked = false;
                    this.startTimer();
                    this.startTimer2();
                },
                startTimer() {
                    let seconds = 0;
                    let minutes = 0;
                    let hours = 0;
                    this.timer = setInterval(() => {
                        seconds++;
                        if (seconds === 60) {
                            seconds = 0;
                            minutes++;
                            if (minutes === 60) {
                                minutes = 0;
                                hours++;
                            }
                        }
                        this.formattedTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
                    }, 1000);
                },
                startTimer2() {
                    this.timer2 = setInterval(() => {
                        this.imcome += this.secondRate;
                    }, 1000);
                },
                stopTimer() {
                    clearInterval(this.timer);
                    clearInterval(this.timer2);
                },
                again() {
                    this.IsClicked = true;
                    this.monthlyPay = 0;
                    this.workingDays = 0;
                    this.hoursPerDay = 0;
                    this.errorMessage = '';
                    this.imcome = 0;
                    this.formattedTime = '00:00:00';
                    this.stopTimer();
                }

            },
            computed: {
                hourlyRate() {
                    return this.monthlyPay / (this.workingDays * this.hoursPerDay);
                },
                minuteRate() {
                    return this.hourlyRate / 60;
                },
                secondRate() {
                    return this.minuteRate / 60;
                },
            }



        }).mount('#app')
    </script>
</body>

</html>